<template>
    <div class="register recharge">
        <van-nav-bar :title="$t('charge.title')" leftArrow @click-left="_return"/>
        <van-tabs v-model="active">
            <van-tab :title="$t('withdraw.recharge1')">
                <div class="rechargeMain">
                    <van-cell :title="$t('common.coin')" :value="account" @click.native="chooseCoins" is-link/>
                    <div class="code" v-if="!tag">
                        <div class="box" type="flex" justify="space-between">
                            <div>
                                <!-- <p>暂无使用</p> -->
                                <qrcode :value="rechargeUrls" :options="{ size: 80 }"></qrcode>
                                <p>{{$t('charge.code')}}</p>
                            </div>
                            <div>
                                <p class="address">{{rechargeUrls}}</p>
                                <button class="btn tag-read" @click="copy" :data-clipboard-text="rechargeUrl">{{$t('charge.copy')}}</button>
                            </div>
                        </div>
                    </div>
                    <div class="codes" v-if="tag">
                        <van-row type="flex" justify="space-between">
                            <van-col span="5">
                                <qrcode :value="rechargeUrl" :options="{ size: 60 }"></qrcode>
                                <p style="font-size: 10px">{{$t('charge.code')}}</p>
                            </van-col>
                            <van-col span="19">
                                <div><span>地址</span><p>{{rechargeUrl}}</p><button class="tag-read" @click="copy" :data-clipboard-text="rechargeUrl">{{$t('charge.copy')}}</button></div>
                                <div><span>标签</span><p>{{tag}}</p><button class="tag-read" @click="copy" :data-clipboard-text="tag">{{$t('charge.copy')}}</button></div>
                            </van-col>
                        </van-row>
                    </div>
                    <p class="tip">{{$t('charge.remark')}}</p>
                    <div class="list" v-if="list">
                        <p class="title">{{$t('charge.charge_state_two')}}</p>
                        <!-- <ul>
                            <li v-for="item in list" style="margin-top: 10px">
                                <van-row type="flex" justify="space-between" align="center">
                                    <van-col>+{{Number(item.num).toFixed(4)}} AAT</van-col>
                                    <van-col>
                                        <p class="org">{{$t('charge.charge_state_two')}}</p>
                                        <span>{{item.add_time}}</span>
                                    </van-col>
                                </van-row>
                            </li>
                        </ul> -->
                    </div>
                </div>
            </van-tab>
             <van-tab :title="$t('withdraw.recharge2')">
                <div class="rechargeMain">
                    <van-cell :title="$t('common.coin')" :value="account" @click.native="chooseCoin" is-link/>
                    <div class="code" v-if="!tag">
                        <div class="box" type="flex" justify="space-between">
                            <div>
                                <qrcode :value="rechargeUrl" :options="{ size: 80 }"></qrcode>
                                <p>{{$t('charge.code')}}</p>
                            </div>
                            <div>
                                <p class="address">{{rechargeUrl}}</p>
                                <button class="btn tag-read" @click="copy" :data-clipboard-text="rechargeUrl">{{$t('charge.copy')}}</button>
                            </div>
                        </div>
                    </div>
                    <div class="codes" v-if="tag">
                        <van-row type="flex" justify="space-between">
                            <van-col span="5">
                                <qrcode :value="rechargeUrl" :options="{ size: 60 }"></qrcode>
                                <p style="font-size: 10px">{{$t('charge.code')}}</p>
                            </van-col>
                            <van-col span="19">
                                <div><span>地址</span><p>{{rechargeUrl}}</p><button class="tag-read" @click="copy" :data-clipboard-text="rechargeUrl">{{$t('charge.copy')}}</button></div>
                                <div><span>标签</span><p>{{tag}}</p><button class="tag-read" @click="copy" :data-clipboard-text="tag">{{$t('charge.copy')}}</button></div>
                            </van-col>
                        </van-row>
                    </div>
                    <p class="tip">{{$t('charge.remark')}}</p>
                    <div class="list" v-if="list">
                        <p class="title">{{$t('charge.charge_state_two')}}</p>
                        <ul>
                            <li v-for="item in list" style="margin-top: 10px">
                                <van-row type="flex" justify="space-between" align="center">
                                    <van-col>+{{Number(item.num).toFixed(4)}} AAT</van-col>
                                    <van-col>
                                        <p class="org">{{$t('charge.charge_state_two')}}</p>
                                        <span>{{item.add_time}}</span>
                                    </van-col>
                                </van-row>
                            </li>
                        </ul>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
        <van-popup v-model="typeShow" position="bottom" :overlay="true">
            <van-picker show-toolbar :title="$t('info.coins')" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>
         <van-popup v-model="typeShows" position="bottom" :overlay="true">
            <van-picker show-toolbar :title="$t('info.coins')" :columns="columnes" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>
    </div>
</template>

<script>
    import moment from 'moment'
    import Clipboard from 'clipboard';
    export default {
        data() {
            return {
                account:'AAT',
                typeShow:false,
                typeShows:false,
                columns:[],
                columnes:[],
                rechargeUrl:'',
                list:[],
                tag:'',
                active: 0,
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            chooseCoin(){
                this.typeShow = true
            },
            onCancel(){
                this.typeShow = false
                this.typeShows = false
            },
            chooseCoins(){
                this.typeShows = true
            },
            onConfirm(data){
                this.account = data
                this.onCancel()
                this.getAddress()
            },
            getData(){
                this.$api.post('user/recharge')
                    .then(res =>{
                        this.list = res.detail

                        if(this.list.length == 0){
                            this.list = false
                        }else{
                            this.list.map(i =>{
                                i.add_time = moment(i.add_time*1000).format('YYYY-MM-DD')
                                i.coin_name = i.coin_name.toUpperCase()
                            })
                        }
                    })
                this.$api.get('index/getCoins')
                    .then(res =>{
                        console.log(res)
                        var that=this
                        that.columns = []
                        res.detail.map(i => {
                            console.log(i.unit)
                            if(i.unit!='BTC'){
                                that.columnes.push(i.unit)
                            }
                            that.columns.push(i.unit)
                        })
                        console.log(that.columnes)
                    })
            },
            getAddress(){
                this.$api.get('index/getZrAddr',{coin_name:this.account.toLowerCase()})
                    .then(res =>{
                        this.rechargeUrls = res.detail.addr
                        this.rechargeUrl = res.detail.addr
                        this.tag = res.detail.tag
                    })
            },
            copy(){
                let clipboard = new Clipboard('.tag-read')
                clipboard.on('success', e => {
                    this.$toast('复制成功')
                    clipboard.destroy()
                })
                clipboard.on('error', e => {
                    this.$toast('该浏览器不支持自动复制')
                    clipboard.destroy()
                })
            },
        },
        created() {
            this.getData()
            this.getAddress()
        },
        mounted(){
            this.$emit('disappear')
        },
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
    font = #23ba92
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .rechargeMain
        width 94%
        margin 0 auto
        .van-cell
            background linear-gradient(90deg,#53d9b5,#2bc299) !important
            color #135a47
            border-radius 5px
            .van-cell__value,.van-cell__right-icon
                color #135a47


        .code
            padding 15px 35px
            margin-top 10px
            border-radius 5px
            border 1px solid #ebebeb
            .box
                display flex
                display -webkit-flex
                justify-content space-between
            div
                p
                    color #666
                    margin-top 10px
                .address
                    margin-top 10px
                    width 150px
                    font-size 14px
                    word-break: break-all;
                    line-height 20px
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                .btn
                    height 35px
                    border-radius 25px
                    margin-top 15px
                    color #fff
        .codes
            padding 15px 0px
            margin-top 10px
            border-radius 5px
            .van-col
                p
                    color #FFFFFF
                    margin-top 10px
                div
                    display flex
                    display -webkit-flex
                    justify-content space-between
                    align-items center
                    &:last-child
                        margin-top 15px
                    span
                        font-size 14px
                        color #D8D8D8
                    .tag-read
                        background font
                        color black
                        padding 5px 25px
                        border-radius 15px
                    p
                        width 48%
                        margin-top 0px
                        word-break: break-all;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
                        padding 2px 10px
                        border-radius 15px
                        line-height 20px

        .tip
            font-size 14px
            color #666
            margin-top 10px
            padding-bottom 5px

        .list
            margin-top 20px
            .title
                border-left 4px solid #2cc299
                color #333
                padding-left 5px
            ul
                margin-top 15px
                li
                    border-radius 5px
                    padding 15px
                    border-bottom 1px solid #ebebeb
                    .van-col
                        color font
                        font-size 20px
                        p
                            color font
                            font-size 14px
                        p.org
                            font-size 16px
                            color #f6543e
                        span
                            font-size 10px
                            color #898989

</style>